<template>
<!-- 更多视图 -->
  <div class="container">
    <div class="recommend">
      <VuePullRefresh class="vue-pull" :on-refresh="onRefresh">
        <div class="recommend_title">{{ this.$route.params.titles }}</div>
        <div class="view">
          <ul>
            <router-link tag="li" :to="{name:'musicplay',params:{songid:item.song_id}}" v-for="(item,index) in today_recommend" :key="index">
              <img :src="item.pic_big" alt="">
              <div class="view_title">{{ item.title }}</div>
            </router-link>
          </ul>
        </div>
      </VuePullRefresh>
    </div>
  </div>
</template>

<script>
import VuePullRefresh from 'vue-pull-refresh';
  export default {
    name:"morelist",
    components:{
      VuePullRefresh
    },
    data(){
      return{
        today_recommend:[],
        offset:0
      }
    },
    props:{
      title:{
        type:String,
        default:"今日榜单"
      },
      musictype:{
        type:String,
        default:"1"
      }
    },
    mounted(){
      let url = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type=" + this.$route.params.musictype +"&size=12&offset=" + this.offset
      this.$axios.get(url)
        .then(res => {
          this.today_recommend = res.data.song_list
          this.offset += 12
        })
        .catch(error => {
          console.log(error);
        })
    },
    methods:{
      onRefresh:function(){
        let that = this;
        const moreListUrl = this.HOST + "/v1/restserver/ting?method=baidu.ting.billboard.billList&type=" + this.musictype +"&size=12&offset=" + this.offset
        return new Promise(function(resolve,reject){
          setTimeout(() => {
            that.$axios.get(moreListUrl)
              .then(res => {
                that.offset >= res.data.billboard.billboard_songnum - 12 ? console.log("没有数据了...") : that.offset += 12,
                that.today_recommend = res.data.song_list
                console.log(res.data)
                resolve();
              })
              .catch(error => {
                console.log(error)
              })
          })
        })
      }
    }
  }
</script>

<style scoped>

.container{
  width: 100%;
  height: 100%;
  background-color: white;
}

.recommend{
  width: 100%;
  height: 64px;
  display: block
}

.recommend_title{
  padding: 22px;
  font-size: 20px;
  flex: 1
}

.vue-pull{
  width: 100%;
  height: 100%;
}

.view{
  width: 100%;
  height: 100%;
}

.view ul {
  list-style: none;
  height: 100%;
}

.view ul li{
  width: 47%;
  height: 235px;
  float: left;
  margin:5px;
}

.view ul li img{
  width: 100%;
  height: 185px;
}

.view_title{
  text-align: center;
  font-size: 18px;
  /* 超出一行的文本用省略号显示 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pull-down-container{
  max-height: none;
  overflow-y: visible;
  overflow:visible !important
}

</style>